Skip to content

feat: use CSS color-scheme to improve dark theme#2007

Open
ayhid wants to merge 2 commits intostrapi:mainfrom
ayhid:feat/color-scheme
Open

feat: use CSS color-scheme to improve dark theme#2007
ayhid wants to merge 2 commits intostrapi:mainfrom
ayhid:feat/color-scheme

Conversation

@ayhid
Copy link
Copy Markdown
Contributor

@ayhid ayhid commented Mar 20, 2026

Summary

  • Adds the CSS color-scheme property to the html element, driven by the active theme
  • Introduces a COLOR_SCHEMES const map and ColorScheme type to avoid magic strings
  • Sets colorScheme: 'light' on lightTheme and colorScheme: 'dark' on darkTheme
  • Native browser UI elements (scrollbars, form controls, selection highlights) now render in the appropriate color scheme automatically

Closes #947

Test plan

  • TypeScript type check passes
  • All unit tests pass (28/28 suites; DatePicker failure is pre-existing on main)
  • Visual check: toggle dark theme in Storybook and verify scrollbars render dark
  • Visual check: verify light theme scrollbars remain unchanged

Add the color-scheme CSS property to the html element based on the
active theme. This makes native browser UI elements (scrollbars, form
controls, selection highlights) render in the appropriate color scheme.

Closes strapi#947
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 20, 2026

@ayhid is attempting to deploy a commit to the Strapi Team on Vercel.

A member of the Team first needs to authorize it.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 20, 2026

🦋 Changeset detected

Latest commit: fd9b3e2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@strapi/design-system Minor
@strapi/icons Minor
@strapi/ui-primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: Use css color-scheme to improve dark theme

1 participant